<template>
	<!-- 我发布的群 -->
	<view class="container">
		<scroll-view scroll-x scroll-with-animation class="tab-view" :scroll-left="scrollLeft">
			<view v-for="(item, index) in typeList" :key="index" class="tab-bar-item" :class="[currentTab == index ? 'active' : '']"
			 :data-current="index" @tap.stop="swichNav">
				<text class="tab-bar-title">{{ item.title }}</text>
			</view>
		</scroll-view>
		<swiper class="tab-content" :current="currentTab" duration="150" @change="switchTab" :style="{ height: winHeight + 'px' }">
			<swiper-item v-for="(itemTwo, indexTwo) in typeList" :key="indexTwo">
				<scroll-view scroll-y class="scoll-y" @scrolltolower="loadMore">
					<!--start 内容部分可直接删除-->
					<view class="list-view">
						<weiNoData :visible="isNoData"></weiNoData>
						<block v-for="(item, index) in dataList" :key="index">
							<tui-list-cell :index="index" :last="count == index">
								<view class="tui-news-flex tui-flex-start">
									<view class="tui-news-picbox tui-w220 " @click="detail(item.groupId)">
										<image lazy-load="true" :src="$cdn.groupCover + item.coverImg" mode="aspectFill" style="border-radius: 10%;" class="tui-h165 tui-block"></image>
									</view>
									<!-- 内容 -->
									<view @click="detail(item.groupId)" class="tui-news-tbox tui-flex-column tui-flex-between tui-h165 tui-pl-20">
										<view class="tui-news-title">{{ item.groupTitle }}</view>
										<view class="tui-sub-box tui-pt20">
											<view class="tui-sub-source">{{ item.createTime }}</view>
											<view class="tui-sub-cmt">
												<view>{{ item.pv==null ? 0:item.pv  }}人查看</view>
												<!-- <view class="tui-scale"><tui-tag size="small" :plain="true" shape="circleRight" v-if="item.pv>100">热门</tui-tag></view> -->
											</view>
										</view>
									</view>
									<view style="color:blue;" @tap="toGroupEdit(item.groupId)">编辑</view>
								</view>
							</tui-list-cell>
						</block>
					</view>
					<!--end 内容部分可直接删除-->
					<!--加载loadding-->
					<tui-loadmore :visible="loadding" :index="3" type="primary"></tui-loadmore>
					<tui-nomore :visible="!pullUpOn" bgcolor="#f2f2f2"></tui-nomore>
					<!--加载loadding-->
				</scroll-view>
			</swiper-item>
		</swiper>

		<tui-tips ref="toast" position="center"></tui-tips>
		<!--加载loadding-->
		<!-- <tui-loadmore :visible="loadding" :index="3" type="primary"></tui-loadmore>
		<tui-nomore :visible="!pullUpOn" bgcolor="#f2f2f2"></tui-nomore> -->
		<!--加载loadding-->
	</view>
</template>

<script>
import tuiIcon from '@/components/icon/icon';
import tuiTag from '@/components/tag/tag';
import tuiListCell from '@/components/list-cell/list-cell';
import tuiLoadmore from '@/components/loadmore/loadmore';
import tuiNomore from '@/components/nomore/nomore';
import tuiTips from '@/components/tips/tips';
import weiNoData from '@/components/wei-nodata/wei-nodata.vue';

export default {
	components: {
		tuiIcon,
		tuiTag,
		tuiListCell,
		tuiLoadmore,
		tuiNomore,
		tuiTips,
		weiNoData
	},
	computed: {
		count() {
			return this.dataList.length - 1;
		}
	},
	data() {
		return {
			$cdn: this.$cdn,
			// 分页必备参数
			isNoData: false,
			pageIndex: 1,
			loadding: false,
			pullUpOn: true,

			winHeight: '', //窗口高度
			currentTab: 0, //预设当前项的值
			scrollLeft: 0, //tab标题的滚动条位置

			typeList: [],
			groupTypeId: 1,

			dataList: []
		};
	},
	onLoad: function() {
		let that = this;
		//  高度自适应
		uni.getSystemInfo({
			success: function(res) {
				let calc = res.windowHeight;
				that.winHeight = calc;
			}
		});
		this.getGroupTypeList();
	},
	created() {},
	methods: {
		// 滚动切换标签样式
		switchTab: function(e) {
			let cur = e.detail.current;
			if (this.currentTab == cur) {
				
			} else {
				// 切换后3个参数状态还原
				this.loadding = false,
				this.pullUpOn = true;
				this.isNoData=false;
				
				this.currentTab = cur;
				this.groupTypeId=this.typeList[this.currentTab].groupTypeId;
				this.dataList=[];
				this.pageGroupByGroupTypeId(1, false,{groupTypeId:this.groupTypeId});
			}
			this.checkCor();
		},
		// 点击标题切换当前页时改变样式
		swichNav: function(e) {
			let cur = e.currentTarget.dataset.current;
			if (this.currentTab == cur) {
				return false;
			} else {
				// 切换后3个参数状态还原
				this.loadding = false,
				this.pullUpOn = true;
				this.isNoData=false;
				
				this.currentTab = cur;
				this.groupTypeId=this.typeList[this.currentTab].groupTypeId;
				this.dataList=[];
				this.pageGroupByGroupTypeId(1, false,{groupTypeId:this.groupTypeId});
			}
		},
		//判断当前滚动超过一屏时，设置tab标题滚动条。
		checkCor: function() {
			if (this.currentTab > 3) {
				//这里距离按实际计算
				this.scrollLeft = 300;
			} else {
				this.scrollLeft = 0;
			}
		},
		loadMore(){
			if (!this.pullUpOn) return;
			// 显示加载更多loading
			this.loadding = true;
			this.pageGroupByGroupTypeId(++this.pageIndex, false, { groupTypeId: this.groupTypeId });
		},
		detail(groupId) {
			uni.navigateTo({
				url: '/pages/group/group-detail?groupId=' + groupId
			});
		},
		// 去编辑
		toGroupEdit(groupId) {
			uni.navigateTo({
				url: '/pages/group/group-edit?groupId=' + groupId
			});
		},
		// 获取聚会分类列表
		getGroupTypeList() {
			//参数
			let postData = {};
			this.tui
				.request('/auth/api/group/getGroupTypeListForMe', postData, 'GET', false, true)
				.then(res => {
					if (res.code == 0) {
						this.typeList = res.data;
						this.groupTypeId=this.typeList[0].groupTypeId;
						this.pageGroupByGroupTypeId(1, false,{groupTypeId:this.groupTypeId});
					}
				})
				.catch(res => {
					console.log(res);
				});
		},
		// 是否展示刷新成功提示
		isShowRefresh(isRefresh) {
			if (isRefresh) {
/* 				let options = {
					msg: '刷新成功',
					duration: 2000,
					type: 'translucent'
				};
				this.$refs.toast.showTips(options); */
				// 关闭下拉刷新loading
				uni.stopPullDownRefresh();
			}
		},
		// 获取
		pageGroupByGroupTypeId(pageIndex, isRefresh, postData) {
			this.tui
				.request(this.$api.pageGroupByMe + '?pageNum=' + pageIndex + '&pageSize=' + this.$api.pageSize, postData, 'POST', false, pageIndex == 1 && !isRefresh ? false : true)
				.then(res => {
					// 如是下拉刷新则待请求完成提示刷新成功
					this.isShowRefresh(isRefresh);
					if (res.code == 0) {
						// 如无数据
						if (res.data.total == 0) {
							this.isNoData = true;
							// 加return 让后面nomore不展示【没有更多了】
							return;
						}

						if (pageIndex == 1) {
							this.dataList = res.data.rows;
						} else {
							this.dataList = this.dataList.concat(res.data.rows);
							// 隐藏加载更多loading
							this.loadding = false;
						}

						// 如已是最后一条，则提示无加载更多
						if (this.dataList.length >= res.data.total) {
							this.pullUpOn = false;
							this.loadding = false;
						}
					} else {
						this.tui.toast('失败，' + res.msg);
					}
				})
				.catch(res => {
					console.log(res);
				});
		}
	},
	//页面相关事件处理函数--监听用户下拉动作
	onPullDownRefresh: function() {
		// 下拉重置页码为第一页
		this.pageIndex = 1;
		this.pageGroupByGroupTypeId(this.pageIndex, true, { groupTypeId: this.groupTypeId });
		// 允许下拉和加载更多
		this.pullUpOn = true;
		this.loadding = false;
		// 拉新数据前，先隐藏
		this.isNoData = false;
	},
	// 页面上拉触底事件的处理函数
	onReachBottom: function() {
		if (!this.pullUpOn) return;
		// 显示加载更多loading
		this.loadding = true;
		this.pageGroupByGroupTypeId(++this.pageIndex, false, { groupTypeId: this.groupTypeId });
	}
};
</script>

<style>
/*tabbar start*/
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}

.tab-view::before {
	content: '';
	position: absolute;
	border-bottom: 1upx solid #eaeef1;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	bottom: 0;
	right: 0;
	left: 0;
}

.tab-view {
	width: 100%;
	height: 100upx;
	overflow: hidden;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	/* #ifdef H5 */
	top: 44px;
	/* #endif */
	left: 0;
	z-index: 99;
	background: #fff;
	white-space: nowrap;
}

.tab-bar-item {
	padding: 0;
	height: 100upx;
	min-width: 80upx;
	line-height: 100upx;
	margin: 0 28upx;
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
}

.tab-bar-title {
	height: 100upx;
	line-height: 100upx;
	font-size: 28upx;
	color: #999;
	font-weight: 200;
}

.active {
	border-bottom: 6upx solid #5677fc;
}

.active .tab-bar-title {
	color: #5677fc !important;
	font-size: 30upx;
	font-weight: bold;
}

/*tabbar end*/
.scoll-y {
	height: 100%;
}

.list-view {
	margin-top: 100upx;
	width: 100%;
	background: #fff;
	box-sizing: border-box;
	padding-bottom: env(safe-area-inset-bottom);
}

/* 卡片 */
.list-item {
	padding: 30upx 30upx;
	display: flex;
	align-items: item;
}

.item-img {
	height: 180rpx;
	width: 180rpx;
	margin-right: 20upx;
	display: block;
}

.item-box {
	flex: 1;
	width: 70%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.item-title {
	font-size: 32upx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.item-time {
	color: #999;
	font-size: 24upx;
}
/* 卡片结束 */

/* 卡片2 */

.tui-news-flex {
	width: 100%;
	display: flex;
}

.tui-flex-start {
	align-items: flex-start !important;
}

.tui-flex-center {
	align-items: center !important;
}

.tui-flex-column {
	flex-direction: column !important;
}

.tui-flex-between {
	justify-content: space-between !important;
}

.tui-news-cell {
	display: flex;
	padding: 20rpx 30rpx;
}

.tui-news-tbox {
	flex: 1;
	width: 100%;
	box-sizing: border-box;
	display: flex;
}

.tui-news-picbox {
	display: flex;
	position: relative;
}

.tui-w220 {
	width: 220rpx;
}

.tui-h165 {
	height: 165rpx;
}

.tui-block {
	display: block;
}

.tui-news-title {
	width: 100%;
	font-size: 28rpx;
	word-break: break-all;
	word-wrap: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	box-sizing: border-box;
}

.tui-pl-20 {
	padding-left: 20rpx;
}

.tui-pt20 {
	padding-top: 20rpx;
}

.tui-sub-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #999;
	box-sizing: border-box;
	line-height: 24rpx;
}

.tui-sub-source {
	font-size: 26rpx;
}

.tui-sub-cmt {
	font-size: 24rpx;
	line-height: 24rpx;
	display: flex;
	align-items: center;
}

.tui-tag {
	padding: 2rpx 6rpx !important;
	margin-left: 10rpx;
}

.tui-scale {
	transform: scale(0.6);
	transform-origin: center center;
}
</style>
